import React from 'react';
import {Timeline, Card, Menu} from 'antd';
import style from './css/BlogList.css';

class BlogList extends React.Component {
	
	render() {
		return (
			<Timeline className='blogListContainer' pending={<span></span>}>
				{this.props.children}
			</Timeline>
		);
	}
	
}

class Item extends React.Component {
	
	render() {
		let {date, title, extra, onClick, content, labelList=[]} = this.props;
		let labelNodes = [];
		for(let label of labelList) {
			labelNodes.push(<span className={style.label} key={label.labelId}>{label.labelName}</span>);
		}
		let titleNode = (
			<div>
				<div>{title}</div>
				<div className={style.labelContainer}>{labelNodes}</div>
			</div>
		);
		return (
			<Timeline.Item className='blogListItemContainer'>
				<span className={style.date}>{date}</span>
				<Card 
				title={titleNode}
				className={style.cardContainer} 
				bordered={true} 
				extra={extra} 
				onClick={onClick}>
					<p className={style.cardContent + ' comment-content'} dangerouslySetInnerHTML={{__html: content}}></p>
			    </Card>
			</Timeline.Item>
		);
	}
	
}

BlogList.Item = Item;

export default BlogList;